<template>
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet" />
  <div>
    <!-- 正片内容 -->
    <div class="background-box-css">
      <!-- 25个位置随机的雪花 -->
      <div class="snowflake" v-for="n in 60" :key="n" :style="getSnowStyle(n)"></div>
      <div class="text-css">
        <Header />
        <Main />
      </div>
      <div class="gov">
        <img style="width: 20px" src="../../assets/images/备案图标.png" />
        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44197102000101" target="_blank">粤公网安备44197102000101</a>
        &nbsp;&nbsp;&nbsp;
        <a href="http://beian.miit.gov.cn/" target="_blank">
          豫ICP备2024079568号</a>
      </div>
      <n-back-top :right="100" style="background:#D4A76A" />
    </div>
  </div>
</template>

<script setup>
import Header from "../customer/components/header/index.vue";
import Main from "../customer/components/main/index.vue";
import { ref, onMounted } from "vue";

// 初始化雪花样式
const snowStyles = ref([]);

// 生成固定的雪花样式
const generateSnowStyles = () => {
  const styles = [];
  for (let n = 1; n <= 60; n++) {
    styles.push({
      left: `${Math.floor(Math.random() * 96)}%`,
      width: `${Math.floor(Math.random() * 11) + 5}px`,
      height: `${Math.floor(Math.random() * 8) + 5}px`,
      animationDuration: `${Math.floor(Math.random() * 11) + 5}s`,
      animationDelay: `${Math.floor(Math.random() * 6)}s`,
      opacity: Math.floor(Math.random() * 6) / 10,
      filter: `blur(${Math.floor(Math.random() * 2)}px)`,
    });
  }
  return styles;
};


// 雪花样式计算属性
const getSnowStyle = (n) => snowStyles.value[n - 1];

onMounted(() => {
  snowStyles.value = generateSnowStyles();
});
</script>

<style scoped lang="scss">
@use "sass:math";

// 定义动画参数
.g-container {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Ma Shan Zheng", cursive;
  color: #6d2e2e;
  font-size: clamp(60px, 8vw, 120px);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.2);
  }
}

.text-css {
  position: relative;
  margin: auto;
  
  max-width: 2000px;
  width: 60%;
  box-shadow: 5px 5px 3px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


.background-box-css {
  position: relative;
  min-height:100vh;
  padding: 30px 0 10px 0px;
  background: #ecc995 50%;
  overflow: hidden;
  border-radius: 10px;
}

.snowflake {
  position: absolute;
  background: white;
  border-radius: 50%;
  top: -10px;
  animation: falling linear infinite;
  pointer-events: none;
}

@keyframes falling {
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}

.gov {
  padding-top: 15px;
}

.gov a {
  color: #855e0a;
}

.gov a:hover {
  color: #e04e0b;
}
</style>